<template>
	<view class="contain" :style="{ paddingTop: setmargintop() + 'px' }">
		<view class="new-top-nav">
			<uni-nav-bar title="在线课堂" backgroundColor="#fff" color="#000" statusBar="true" @clickLeft="back()"
				left-icon="arrowleft"></uni-nav-bar>
		</view>
		<view class="subsection" v-if="groupVisible">
			<scroll-view class="select-top-bar" :scroll-x="true">
				<view v-for="(item, index) in selectViewList" :key="index" @click="selectViewFn(item, index)"
					class="select-top-bar-item" :class="{ 'selected': selected == index }">
					<view class="top-bar-item-title">{{ item.name }}</view>
				</view>
			</scroll-view>
		</view>
		<view class="contain-view">
			<!-- search模块 -->
			<!-- <view class="searchs" v-if="groupVisible">
				<view class="search">
					<view class="testop">
						<view class="buttime">
							<view class="center">
								<image src="@/static/socialized-service/breed/guanjian.png" mode="aspectFit"></image>
								<uni-easyinput class="uni-mt-5" v-model="searchName" :inputBorder="false"
									placeholder="关键词"></uni-easyinput>
							</view>
						</view>
					</view>
				</view>
				<view class="btn" @click="goSearch">搜索</view>
			</view> -->

			<scroll-view v-if="groupVisible" scroll-y="true" :style="{height:setcollapseheight() + 'px'}" :scroll-top="scrollTop"
				@scroll="onScroll" @scrolltolower="handleScrolltolowerone()">
				<view>
					<view v-if="dataList.length != 0" class="videoGroup">
						<template v-for="item,index in dataList">
							<view class="video-card" v-if="item.vedioGroupId" :key="index" @click="loadVideo(item)">
								<view class="header">
									<view class="group-title">
										<uni-icons type="videocam" :color="'#8d7e61'" size="25" class="icon" />
										<view class="title-txt">分组名称：</view>
										<view class="title-name">{{ item.name }}</view>
									</view>
								</view>
								<view class="group-content">
									<view class="video-title">
										<uni-icons type="list" :color="'#8d7e61'" size="20" class="icon" />
										视频列表：
									</view>
									<view class="video-content">
										<view class="video" v-for="ite,i in item.titles" :key="ite.id">{{ i+1 }}. {{ ite }}</view>
									</view>
								</view>
								<view class="pub">
									<view class="publisher">
										<uni-icons type="person" :color="'#ff7c7d'" size="20" class="icon" />
										发布人： {{ item.createUserName || '' }}
									</view>
									<view class="time">
										<uni-icons type="calendar" :color="'#0188ff'" size="20" class="icon" />
										发布时间： {{ item.updateDate }}
									</view>
									<view class="num">
										<uni-icons type="videocam" :color="'#ffba42'" size="20" class="icon" />
										播放量： {{ item.watchNum }}
									</view>
								</view>
							</view>
							<view class="video-card" v-else :key="index">
								<view>
									<view class="title">
										<view class="title-txt">视频名称：</view>
										<view class="title-name">{{ item.name }}</view>
									</view>
								</view>
								<view class="video-contentios">
									<MyVideo1 :videoUrl="item.addressUrl" class="video"></MyVideo1>
									<!-- <image @click="showPopup(item)" class="imgbox" src="@/static/play.png" mode="aspectFit"></image> -->
								</view>
								<view class="pub">
									<view class="publisher">
										<uni-icons type="person" :color="'#ff7c7d'" size="20" class="icon" />
										发布人： {{ item.createUserName || '' }}
									</view>
									<view class="time">
										<uni-icons type="calendar" :color="'#0188ff'" size="20" class="icon" />
										发布时间： {{ item.updateDate }}
									</view>
									<view class="num">
										<uni-icons type="videocam" :color="'#ffba42'" size="20" class="icon" />
										播放量： {{ item.watchNum }}
									</view>
								</view>
							</view>
						</template>
					</view>

					<view v-if="dataList.length == 0" class="facility-view-nodata">
						<image class="facility-view-blankimg" mode="widthFix" src="@/static/blank.png"></image>
						<view class="facility-view-nodata-line">
							暂无数据
						</view>
					</view>
				</view>
			</scroll-view>

			<view v-if="!groupVisible">
				<videoList ref="videoLists" :vedioGroupId="vedioGroupId" @setVideoTotal="setVideoTotal"
					@toScrollTop="toScrollTop"></videoList>
				
			</view>
		</view>
		<bottomBar></bottomBar>
	</view>
</template>

<script>
	import bottomBar from "@/subPage1/components/socialized-bottomtabar/breed-bottomtabar"
	import videoList from "./videoList"
	import MyVideo from "@/subPage1/components/myVideo/xcxVideo.vue"
	import MyVideo1 from "@/subPage1/components/myVideo/myVideo.vue"

	import onlineClassApi from '@/api/socialized-servce/breed-aquatics/online-class/index.js'

	export default {
		components: {
			bottomBar,
			videoList,
			MyVideo,
			MyVideo1
		},
		data() {
			return {
				selected: 0,
				scrollTop: 0,
				oldScrollTop: 0,
				vedioTypeId: '',
				groupVisible: true,
				viewALLList: [],
				selectViewList: [],
				// 搜索
				searchName: '',
				searchDate: [],
				searchParam: {},
				dataList: [],
				groupPage: {
					page: 1,
					size: 5,
					total: 0,
				},
				videoPage: {
					page: 1,
					size: 5,
					total: 0,
				},
				vedioGroupId: '',
				// 消息中心跳转
				loadTab: false,
				vedioId: '',
			}
		},
		onPullDownRefresh() {
			this.searchName = ''
			this.searchDate = []
			this.searchParam = {}
			this.updataContent()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onLoad(e) {
			if (e.id && e.vedioTypeId) {
				this.vedioId = e.id
				this.vedioTypeId = e.vedioTypeId
				this.vedioGroupId = e.vedioGroupId
				this.groupVisible = false
				this.updataContent()
			} else if (e.vedioTypeId) {
				this.loadTab = true
				this.vedioTypeId = e.vedioTypeId
			}
		},
		onShow() {
			
		},
		mounted() {
			this.loadVideoType()
		},
		methods: {
			selectViewFn(row, i) {
				this.searchName = ''
				this.searchDate = []
				this.searchParam = {}
				this.selected = i
				this.vedioTypeId = row.vedioTypeId
				this.updataContent()
			},
			onScroll(e) {
				this.oldScrollTop = e.detail.scrollTop
			},
			toScrollTop() {
				this.scrollTop = this.oldScrollTop
				this.$nextTick(() => {
					this.scrollTop = 0
				})
			},
			// 获取视频分类
			loadVideoType() {
				let params = {
					serviceProviderNo: uni.getStorageSync('serviceProviderNo')
				}
				onlineClassApi.queryPageByConditionVedioType(params).then(res => {
					this.viewALLList = this.selectViewList = res.data
					if (this.loadTab) {
						let i = this.selectViewList.findIndex(el => { return el.vedioTypeId == this.vedioTypeId })
						i != -1 && this.selectViewFn(this.selectViewList[i], i)
					} else {
						this.vedioTypeId = this.selectViewList[0].vedioTypeId
						this.loadDataList()
					}
				})
			},
			// 获取视频分组
			loadDataList() {
				onlineClassApi.queryGroupSinglePageByCondition({
					...this.groupPage,
					condition: {
						...this.searchParam,
						vedioTypeId: this.vedioTypeId,
						serviceProviderNo: uni.getStorageSync('serviceProviderNo')
						// auditStatus: 1
					}
				}).then(res => {
					let list = res.data.content
					this.groupPage.total = res.data.totalElements
					if (this.groupPage.page == 1) {
						this.dataList = list
						this.toScrollTop()
					} else {
						this.dataList.push(...list)
					}
				})
			},
			// 搜索
			goSearch() {
				this.searchParam = {
					title: this.searchName,
					// createTime: this.searchDate && this.searchDate+' 00:00:00',
					beginTime: this.searchDate[0] && this.searchDate[0] + ' 00:00:00',
					endTime: this.searchDate[1] && this.searchDate[1] + ' 23:59:59'
				}
				this.updataContent()
			},
			updataContent() {
				if (this.groupVisible) {
					this.groupPage.page = 1
					this.loadDataList()
				} else {
					this.videoPage.page = 1
					this.$nextTick(() => {
						this.$refs.videoLists.loadDataList(this.videoPage, {
							...this.searchParam,
							vedioTypeId: this.vedioTypeId,
							vedioId: this.vedioId
						})
					})
				}
			},
			// 上拉加载更多
			handleScrolltolowerone() {
				if (this.groupVisible) {
					let len = this.groupPage.page * this.groupPage.size
					if (len >= this.groupPage.total) return
					this.groupPage.page += 1
					this.loadDataList()
				} else {
					let len = this.videoPage.page * this.videoPage.size
					if (len >= this.videoPage.total) return
					this.videoPage.page += 1
					this.$refs.videoLists.loadDataList(this.videoPage)
				}
			},
			setVideoTotal(e) {
				this.videoPage.total = parseInt(e)
			},
			// 设置顶部高度
			setmargintop() {
				let top = 0
				top = this.customBar + 10
				return top
			},
			//  设置内容高度
			setcollapseheight() {
				let topheightone = uni.upx2px(270)
				let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				winHeight = parseInt(winHeight) - newheight
				// #ifndef H5
				winHeight = winHeight - 10
				// #endif
				return winHeight
			},
			//返回上一步
			back() {
				if (this.groupVisible) uni.navigateBack({
					delta: 1
				})
				else {
					this.backGroup()
				}
			},
			backGroup() {
				this.selectViewList = this.viewALLList
				this.videoPage.page = 1
				this.groupVisible = true
				this.updataContent()
			},
			// 视频列表
			loadVideo(row) {
				this.selectViewList = this.viewALLList
				let index = this.selectViewList.findIndex(el => {
					return el.vedioTypeId == row.vedioTypeId
				})
				if (index != -1) {
					this.selectViewList = [this.viewALLList[index]]
					this.vedioTypeId = this.selectViewList[0].vedioTypeId
				}
				this.vedioGroupId = row.vedioGroupId
				this.groupVisible = false
				this.updataContent()
			},
			// 查看视频
			showPopup(row) {
				const params = {
					addressUrl: row.singleVedioUrl,
					id: row.vedioId,
				}
				row.watchNum++
				const url = '/pages/popup/popup'
				this.$togo(url, params)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		font-size: 14px;
		line-height: 24px;

		.new-top-nav {
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 99;
		}

		.subsection {
			padding: 0 32rpx;
			margin-bottom: 20rpx;
			border-bottom: 2rpx solid #d3e6f9;

			.select-top-bar {
				width: 100%;
				justify-content: space-around;
				white-space: nowrap;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;

				.select-top-bar-item {
					display: inline-block;
					margin-right: 20rpx;
					padding-bottom: 12rpx;
					min-width: 162rpx;
					height: 60rpx;
					font-size: 30rpx;

					&.selected {
						border-bottom: 4rpx solid #0e7ae9;
					}

					&:last-child {
						margin-right: 0;
					}

					.top-bar-item-title {
						min-width: 162rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						padding: 0 10px;
					}
				}
			}
		}

		.contain-view {
			margin: 0 30rpx;
			position: relative;

			.searchs {
				position: relative;
				display: flex;
				padding-top: 16rpx;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;

				.search {
					width: 100%;
					height: 80rpx;
					border-radius: 60rpx;
					background-color: rgba(255, 255, 255, 1);
					border: 1px solid rgba(0, 0, 0, 0.05);
					box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
					display: flex;
					justify-content: center;
					align-items: center;
					overflow: hidden;

					.testop {
						// width: 50%;
						width: 100%;
						color: #FFFFFF;
						height: 50rpx;
						border-right: 4rpx #cccbce solid;
						margin-left: 5rpx;
						padding-right: 10rpx;
						font-size: 30rpx;

						&:last-child {
							border-right: none;
						}

						.buttime {
							color: #959497;
							height: 50rpx;
							white-space: nowrap;
							font-weight: 600;
							display: flex;
							justify-content: space-between;
							align-items: center;
							overflow: hidden;
						}

						.center {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;

							.textt {
								width: 190rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							image {
								width: 50rpx;
								height: 50rpx;
								margin-right: 10rpx;
								margin-left: 10rpx;
							}
						}

						::v-deep .uni-date-x {
							padding: 0;
							width: 176rpx;

							.uni-date__x-input {
								padding: 0;
								width: 120rpx;
							}

							.icon-calendar {
								// .uni-date__icon-logo {
								display: none;
							}
						}

						::v-deep .uni-date__icon-clear {

							// top: 2rpx;
							// right: -10rpx;
							.uniui-clear::before {
								font-size: 30rpx;
								color: rgb(192, 196, 204);
							}
						}
					}

					.searchbutton {
						width: 20%;
						background: linear-gradient(18deg, #43A2FF 0%, #62B1FF 100%);
						border-radius: 40rpx;
						box-shadow: none;
						margin-left: 10rpx;
						font-size: 28rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.btn {
					position: relative;
					z-index: 66;
					width: 130rpx;
					height: 64rpx;
					margin-left: 8rpx;
					font-size: 28rpx;
					line-height: 64rpx;
					text-align: center;
					color: #FFFFFF;
					background: linear-gradient(18deg, #43A2FF 0%, #62B1FF 100%);
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					opacity: 1;
				}
			}

			.btn-box {
				display: block;
				text-align: right;

				.btn {
					display: inline-block;
					width: 130rpx;
					height: 55rpx;
					line-height: 55rpx;

					&.ml-20 {
						margin-left: 20rpx;
					}

					&.active {
						background-color: #67c23a;
					}
				}
			}

			.videoGroup {
				overflow: auto;
						
				.icon {
					margin-right: 10rpx;
					vertical-align: middle;
				}

				.video-card {
					width: 100%;
					background-color: #fff;
					margin-bottom: 20rpx;
					padding: 20rpx;
					border-radius: 10rpx;
					box-sizing: border-box;

					.header {
						// margin-bottom: 10rpx;
						// color: #8d7e61;
						color: #91743E;
						font-weight: 500;
						font-size: 32rpx;

						.title-txt {
							display: inline-block;
							vertical-align: top;
							vertical-align: middle;
						}

						.title-name {
							display: inline-block;
							width: calc(100% - 220rpx);
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							vertical-align: middle;
						}
					}

					.group-content {
						// background: #edf7ff;
						padding: 0 20rpx;
						font-size: 28rpx;
						// border-radius: 10rpx;

						.video-content {
							max-height: 126px;
							overflow: hidden;
							display: -webkit-box;
							text-overflow: ellipsis;
							-webkit-line-clamp: 4;
							-webkit-box-orient: vertical;
							
							.video {
								border: 1px solid #8d7e61;
								border-radius: 10rpx;
								margin-bottom: 10rpx;
								margin-left: 10rpx;
								padding: 0 10rpx;
								position: relative;
								
								&::before {
									display: inline-block;
									content: '';
									width: 5px;
									height: 5px;
									border-radius: 5px;
									background-color: #8d7e61;
									position: absolute;
									top: 18rpx;
									left: -6rpx;
								}
							}
						}
					}
					
					.video-contentios {
						width: 100%;
						height: 320rpx;
						background-color: #000000;
						position: relative;
						margin-bottom: 20rpx;
					
						.imgbox {
							width: 150rpx;
							height: 150rpx;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translateX(-50%) translateY(-50%);
						}
					}
					.title {

						.title-txt {
							display: inline-block;
							color: #0480fb;
							vertical-align: top;
						}

						.title-name {
							display: inline-block;
							width: calc(100% - 150rpx);
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					.pub {
						padding-left: 16rpx;
						// display: flex;
						&>div {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}
</style>